<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File List</title>
    <!-- Bootstrap CSS -->
    <link href="https://mirror.fe80.cn/twitter-bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome for icons -->
    <!-- <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script> -->
    <!-- Custom CSS -->
    <style>
        body {
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1600px;
            margin: 20px auto;
            padding: 3rem;
            background-color: white;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border-radius: 8px;
        }
        .file-list {
            overflow-x: auto;
        }
        .file-row {
            transition: background-color 0.2s ease-in-out;
        }
        .file-row:hover {
            background-color: #eaeaea;
        }
        .file-name-x {
            display: flex;
            align-items: center;
        }
        .file-icon {
            color: #6c757d;
            margin-right: 1rem;
            font-size: 1.25em;
        }
        .file-actions-x {
            text-align: right;
        }
        .file-download-btn {
            padding: 0.3rem 1rem;
            font-size: 0.85em;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="text-center mb-4">文件下载页</h2>
        <div class="file-list">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">File Name</th>
                        <th scope="col">Size</th>
                        <th scope="col">Modified</th>
                        <th scope="col">Actions</th>
                    </tr>
                </thead>
                <tbody id="file-list-body">
                    <!-- File rows will be dynamically added here -->
                </tbody>
            </table>
        </div>
    </div>

    <!-- Bootstrap JS and Popper.js -->
    <script src="https://mirror.fe80.cn/popper.js/2.11.8/umd/popper.min.js"></script>
    <script src="https://mirror.fe80.cn/twitter-bootstrap/5.3.2/js/bootstrap.min.js"></script>
    <script src="https://mirror.fe80.cn/jquery/3.7.1/jquery.min.js"></script>
    <!-- Custom JS -->
    <script>
        function formatSize(bytes) {
            if (bytes === 0) return '0 B';
            const units = ['B', 'KB', 'MB', 'GB', 'TB'];
            let i = 0;
            for (i; bytes >= 1024 && i < units.length - 1; i++) {
                bytes /= 1024;
            }
            return bytes.toFixed(2) +' '+ units[i];
        }
        // Sample data for file list (replace this with your actual data)
        const files = [
            { name: 'example.pdf', size: '1.5 MB', modified: 'Jul 18, 2024', type: 'pdf' },
            { name: 'example.docx', size: '2.3 MB', modified: 'Jul 17, 2024', type: 'docx' },
            { name: 'example.txt', size: '300 KB', modified: 'Jul 16, 2024', type: 'txt' }
        ];

        $.post("http://fc.fe80.cn/osslist",{},function(res){            
            res.files.forEach((file, index) => {
                res.files[index].name = file.key;
                res.files[index].modified = file.lastModified;
                res.files[index].size = formatSize(file.size);
                // files[index].name = file.key;
            });
            renderFiles(res.files);
        });

        function renderFiles(files) {
            const tbody = document.getElementById('file-list-body');
            tbody.innerHTML = '';
            files.forEach((file, index) => {
                let iconClass = 'fas fa-file';
                if (file.type === 'pdf') {
                    iconClass += '-pdf';
                } else if (file.type === 'docx') {
                    iconClass = 'fas fa-file-word';
                } else if (file.type === 'txt') {
                    iconClass = 'fas fa-file-alt';
                }
                iconClass = "";
                //<i class="file-icon ${iconClass}"></i> 
                const row = `
                    <tr class="file-row">
                        <td>${index + 1}</td>
                        <td class="file-name">${file.name}</td>
                        <td>${file.size}</td>
                        <td>${file.modified}</td>
                        <td class="file-actions"><button type="button" class="btn btn-sm btn-primary file-download-btn">Download</button></td>
                    </tr>
                `;
                tbody.insertAdjacentHTML('beforeend', row);
            });
        }

        
    </script>
</body>
</html>